<template>
    <div class="cont">
        <van-sidebar v-model="activeKey">
            <van-sidebar-item 
                v-for="(item,index) in tab" 
                :key="index" 
                :title="item" 
                @click="handleIdx(index)"
            />
        </van-sidebar>
        <div class="box" v-if="status==0?'isshow':''">
            <div class="inner">
                <h2>心血管病</h2>
                <ul class="gaoxueya">
                    <li @click="handleList(3)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2018/04-21/200x200/5adafc6ab0924.jpg" alt="">
                        <span>高血压</span>
                    </li>
                    <li @click="handleList(4)">
                        <img src="	https://www.160dyf.com/Public/upload/goods/2018/09-28/200x200/5badfc389419a.jpg" alt="">
                        <span>高血脂</span>
                    </li>
                    <li @click="handleList(5)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2017/07-25/200x200/5976da6a79b0d.jpg" alt="">
                        <span>冠心病</span>
                    </li>
                    <li @click="handleList(6)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2018/09-21/200x200/5ba493c68ab40.jpg" alt="">
                        <span>中风</span>
                    </li>
                </ul>
            </div>
            <div class="inner">
                <h2>肝胆用药</h2>
                <ul class="gandan">
                    <li @click="handleList(8)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2017/09-04/200x200/59ad1a486a04c.jpg" alt="">
                        <span>肝炎</span>
                    </li>
                    <li @click="handleList(9)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2019/05-13/200x200/5cd90a41dc7c9.jpg" alt="">
                        <span>脂肪肝</span>
                    </li>
                    <li @click="handleList(10)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2017/05-06/200x200/590d809bb0e0c.jpg" alt="">
                        <span>保肝利胆</span>
                    </li>
                </ul>
            </div>
            <div class="inner">
                <h2>感冒发烧</h2>
                 <ul class="ganmao">
                    <li @click="handleList(154)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2017/06-14/200x200/5941011a2ed80.jpg" alt="">
                        <span>日常用药</span>
                    </li>
                    <li @click="handleList(15)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2017/07-10/200x200/59637a6160f59.jpg" alt="">
                        <span>止咳化痰</span>
                    </li>
                    <li @click="handleList(16)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2017/06-18/200x200/59467ded717c1.jpg" alt="">
                        <span>咽痛咽炎</span>
                    </li>
                    <li @click="handleList(14)">
                        <img src="	https://www.160dyf.com/Public/upload/goods/2017/07-26/200x200/59780abb84b96.jpg" alt="">
                        <span>气管炎哮喘</span>
                    </li>
                    <li @click="handleList(18)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2018/10-09/200x200/5bbc4d3e774a3.jpg" alt="">
                        <span>消炎解毒</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="box" v-if="status===1?'isshow':''">
            <div class="inner">
                <h2>血糖仪</h2>
                <ul class="gaoxueya">
                    <li @click="handleList(160)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2018/11-06/200x200/5be16800ec573.jpg" alt="">
                        <span>雅培</span>
                    </li>
                    <li @click="handleList(161)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2018/07-26/200x200/5b59af2eaf1b2.jpg" alt="">
                        <span>罗氏</span>
                    </li>
                    <li>
                        <img src="https://www.160dyf.com/Public/upload/goods/2019/07-26/200x200/5d3aa89dd8b98.jpg" alt="">
                        <span>强生</span>
                    </li>
                    <li>
                        <img src="https://www.160dyf.com/Public/upload/goods/2018/04-10/200x200/5acc5acac57c0.jpg" alt="">
                        <span>欧姆龙</span>
                    </li>
                </ul>
            </div>
            <div class="inner">
                <h2>口鼻腔护理</h2>
                <ul class="gandan">
                    <li @click="handleList(168)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/03-15/200x200/604f2d1a57a77.jpg" alt="">
                        <span>鼻腔护理</span>
                    </li>
                    <li @click="handleList(169)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/02-27/200x200/6039df76669b1.jpg" alt="">
                        <span>口腔护理</span>
                    </li>
                </ul>
            </div>
            <div class="inner">
                <h2>外用常备</h2>
                 <ul class="ganmao">
                    <li @click="handleList(171)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2020/07-15/200x200/5f0ea7b0f2080.jpg" alt="">
                        <span>口罩</span>
                    </li>
                    <li @click="handleList(172)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2019/06-26/200x200/5d1311095fe45.jpg" alt="">
                        <span>体温计</span>
                    </li>
                    <li @click="handleList(173)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2020/02-27/200x200/5e576c251c240.jpg" alt="">
                        <span>消毒用品</span>
                    </li>
                    <li @click="handleList(174)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2017/08-01/200x200/598039cb907a7.png" alt="">
                        <span>其他</span>
                    </li>
                    <li @click="handleList(175)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2017/07-18/200x200/596dc0553c537.jpg" alt="">
                        <span>创可贴</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="box" v-if="status===2?'isshow':''">
            <div class="inner">
                <h2>儿童保健</h2>
                <ul class="gaoxueya">
                    <li @click="handleList(200)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2019/05-29/200x200/5cee00fd508f0.jpg" alt="">
                        <span>儿童钙类</span>
                    </li>
                    <li @click="handleList(201)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2018/01-15/200x200/5a5c1f3699b15.jpg" alt="">
                        <span>营养补充</span>
                    </li>
                </ul>
            </div>
            <div class="inner">
                <h2>中老年保健</h2>
                <ul class="gandan">
                    <li @click="handleList(208)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2019/06-27/200x200/5d143db36258a.jpg" alt="">
                        <span>降血脂血压</span>
                    </li>
                    <li @click="handleList(209)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2019/08-30/200x200/5d68e679abbe3.jpg" alt="">
                        <span>维生素</span>
                    </li>
                    <li @click="handleList(210)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2017/06-09/200x200/593a4bfde5af0.jpg" alt="">
                        <span>其他</span>
                    </li>
                </ul>
            </div>
            <div class="inner">
                <h2>基础营养补充</h2>
                 <ul class="ganmao">
                    <li @click="handleList(212)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2020/11-17/200x200/5fb3419e5e599.jpg" alt="">
                        <span>调节免疫</span>
                    </li>
                    <li @click="handleList(213)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/01-18/200x200/6005352db230d.jpg" alt="">
                        <span>改善睡眠</span>
                    </li>
                    <li @click="handleList(214)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/02-21/200x200/60321852071f9.jpg" alt="">
                        <span>其他</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="box" v-if="status===3?'isshow':''">
            <div class="inner">
                <h2>手机数码</h2>
                <ul class="gaoxueya">
                    <li @click="handleList(243)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/09-26/200x200/615064ea465ca.jpg" alt="">
                        <span>手机</span>
                    </li>
                    <li @click="handleList(244)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/12-01/200x200/61a787c14ec13.jpg" alt="">
                        <span>电脑平板</span>
                    </li>
                    <li @click="handleList(245)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/06-05/200x200/60bb899875949.jpg" alt="">
                        <span>配件</span>
                    </li>
                    <li @click="handleList(246)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/11-27/200x200/61a231ee6a12b.jpg" alt="">
                        <span>其他</span>
                    </li>
                </ul>
            </div>
            <div class="inner">
                <h2>美妆护肤</h2>
                <ul class="gandan">
                    <li @click="handleList(234)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2020/01-14/200x200/5e1d288d69f5f.jpeg" alt="">
                        <span>护肤</span>
                    </li>
                    <li @click="handleList(235)">
                        <img src="	https://www.160dyf.com/Public/upload/goods/2020/10-23/200x200/5f923ba77bec5.jpg" alt="">
                        <span>口腔护理</span>
                    </li>
                    <li @click="handleList(236)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/04-28/200x200/6088f7fc2f804.jpg" alt="">
                        <span>其他</span>
                    </li>
                </ul>
            </div>
            <div class="inner">
                <h2>健康生活</h2>
                 <ul class="ganmao">
                    <li @click="handleList(238)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/01-15/200x200/60019a23455ef.png" alt="">
                        <span>食品</span>
                    </li>
                    <li @click="handleList(239)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2019/07-25/200x200/5d396fef712a4.jpg" alt="">
                        <span>居家生活</span>
                    </li>
                    <li @click="handleList(240)">
                        <img src="https://www.160dyf.com/Public/upload/goods/2021/03-21/200x200/605744b80ed16.jpg" alt="">
                        <span>其他</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeKey: 0,
                tab:["药品专用","医疗器械","营养保健","健康生活"],
                isshow:true,
                status:0
            }
        },
        methods: {
            handleIdx(idx) {
                this.status = idx
                // console.log(idx);
            },
            handleList(num){
                // console.log(num);
                // this.$router.push({
                //     path:"/goodlist",
                //     params:{
                //         num
                //     }
                // })
                this.$router.push(`/goodlist/${num}`)
            }
        },
    }
</script>

<style src="../assets/css/classfy.css" scoped></style>